<template>
  <!-- 全国布局地图 -->
  <div class="nationalLayout-map">
    <!-- 地图 -->
    <div class="map" ref="map"></div>

    <!-- 公司列表 -->
    <div class="company" v-if="company.show">
      <img
        class="company-cancel"
        src="@/assets/image/about/ic-cancel.png"
        @click="companyClose"
      />
      <div class="company-header">
        {{ company.info.name }}
      </div>
      <app-scrollbar class="company-scrollbar">
        <div class="company-list">
          <div
            class="company-item"
            v-for="item in company.info.company"
            :key="item.id"
            @click="$emit('companySelect', item)"
          >
            <div class="company-item-header"></div>
            <div class="company-item-title">{{ item.name }}</div>
          </div>
        </div>
      </app-scrollbar>
    </div>
  </div>
</template>


<script>
import * as echarts from "echarts";
import china from "./china.json";

export default {
  components: {},
  emits: ["companySelect"],
  props: {
    options: Object,
    companyHeight: {
      type: Number,
      default: 350,
    },
    companyWidth: {
      type: Number,
      default: 300,
    },
  },
  watch: {
    options(data) {
      // 设置数据
      this.setOptions(data);

      this.charts.on("click", (param) => {
        if (param.data && param.data?.cityId != this.company.info?.cityId) {
          this.company.left = param.event.offsetX - this.companyWidth - 40;
          this.company.top = param.event.offsetY + 40;
          this.company.show = true;
          this.company.info = param.data;

          const boxHeight = this.$refs.map.offsetHeight;

          if (boxHeight - this.companyHeight < this.company.top) {
            this.company.top = boxHeight - this.companyHeight;
          }
          if (0 > this.company.left) {
            this.company.left = 0;
          }

          this.setOptions(data, param.dataIndex);
        }
      });
    },
  },

  data() {
    return {
      company: {
        left: 0,
        top: 0,
        show: false,

        info: {},
      },
    };
  },
  unmounted() {
    removeEventListener("resize", this.charts.resize);
  },
  mounted() {
    this.charts = echarts.init(this.$refs.map);
    echarts.registerMap("china", china);
    addEventListener("resize", this.charts.resize);
  },
  methods: {
    companyClose() {
      this.company.show = false;
      this.company.info = {};
      this.setOptions(this.options);
    },
    setOptions(options, active) {
      const data = JSON.parse(JSON.stringify(options));

      const cityList = data.reduce((provinceResult, provinceItem) => {
        provinceResult.push(
          ...provinceItem.children.map((cityItem) => {
            const sp = [
              "北京",
              "天津",
              "重庆",
              "上海",
              "香港特别行政区",
              "澳门特别行政区",
            ];

            return {
              cityId: cityItem.id,
              province: provinceItem.name,
              name: sp.includes(provinceItem.name)
                ? cityItem.name
                : `${provinceItem.name + cityItem.name}`,
              city: cityItem.name,
              value: [cityItem?.lng, cityItem?.lat],
              company: cityItem?.company,
              symbol:
                "image://" + `${require("@/assets/image/about/map-point.png")}`,
            };
          })
        );
        return provinceResult;
      }, []);

      if (!isNaN(active)) {
        cityList[active].symbol =
          "image://" + `${require("@/assets/image/about/map-point-s.png")}`;
        cityList[active].symbolSize = [70, 70];
        cityList[active].itemStyle = {
          opacity: 1,
        };
      }

      const option = {
        title: {
          text: this.title,
          textStyle: {
            color: "#FFFFFF",
            fontSize: "24px",
          },
          left: "center",
          top: 160,
        },
        tooltip: {
          show: false,
        },
        geo: {
          map: "china",
          roam: false,
          show: false,
          zoom: 1.2,
          label: {
            emphasis: {
              show: false,
            },
          },
        },
        series: [
          {
            type: "map",
            map: "china",
            roam: false,
            zoom: 1.2,
            label: {
              emphasis: {
                show: false,
              },
            },
            selectedMode: false,
            itemStyle: {
              areaColor: "#EAE5DF",
              borderColor: "#fff",
              borderWidth: 1,
              show: false,
              textStyle: {
                color: "#797979",
              },
            },
            emphasis: {
              itemStyle: {
                textStyle: {
                  color: "#333",
                },
                borderWidth: 1,
                borderColor: "#EE7800",
                areaColor: "#EE7800",
              },
            },
            select: {
              label: {
                show: false,
              },
              itemStyle: {
                areaColor: "#EE7800",
              },
            },
            data: [],
          },
          {
            mapType: "chinaMap",
            name: "effectScatter",
            roam: true,
            coordinateSystem: "geo",
            type: "scatter",
            data: cityList,
            showEffectOn: "emphasis",
            symbolSize: [11, 11],
            selectedMode: true,
            itemStyle: {
              opacity: 0.8,
            },
          },
        ],
      };

      // 设置数据
      this.charts.setOption(option);

      // 默认高亮
      this.charts.dispatchAction({
        type: "highlight",
        name: "南海诸岛",
      });

      this.charts.dispatchAction({
        type: "highlight",
        name: "九段线",
      });
    },
    charts: Object,
  },
};
</script>
<style lang="scss" scoped>
.nationalLayout-map {
  width: 100%;
  height: 100%;
  position: relative;

  .map {
    width: 100%;
    height: 100%;
  }

  .company {
    z-index: 1001;
    box-sizing: border-box;
    position: absolute;
    width: 300px;
    height: 350px;
    background: #ffffff;
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    left: calc(v-bind("company.left") * 1px);
    top: calc(v-bind("company.top") * 1px);
    display: flex;
    flex-direction: column;

    &-cancel {
      position: absolute;
      right: -30px;
      top: -30px;
      width: 30px;
      height: 30px;
      z-index: 99;
      cursor: pointer;
    }

    &-header {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 50px;
      background: color.$base;
      border-radius: 4px;
      font-size: 20px;
      color: #ffffff;
    }

    &-scrollbar {
      flex: 1;
      padding-right: 20px;
    }

    &-list {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    &-item {
      cursor: pointer;
      display: flex;
      width: 100%;
      height: 50px;
      align-items: center;
      box-sizing: border-box;

      &-header {
        margin-left: 10px;
        width: 5px;
        height: 5px;
        background: color.$base;
      }

      &-title {
        display: flex;
        align-items: center;
        height: 100%;
        margin-left: 10px;
        font-size: 16px;
        color: #333333;
        &:hover {
          color: color.$base;
        }
      }
    }
  }
}
</style>


<style lang="scss" scoped>
@media screen and (max-width: 1200px) {
  .nationalLayout-map {
    .company {
      width: 300px;
      height: 350px;
      border-radius: 4px;
      bottom: 0;
      right: 0;
      left: 0;
      top: 0;
      margin: auto;
      display: flex;
      flex-direction: column;

      &-cancel {
        right: -30px;
        top: -30px;
        width: 30px;
        height: 30px;
      }

      &-header {
        height: 50px;
        border-radius: 4px;
        font-size: 20px;
      }

      &-scrollbar {
        flex: 1;
      }

      &-list {
        // height: 300px;
      }

      &-item {
        height: 50px;

        &-header {
          margin-left: 10px;
          width: 5px;
          height: 5px;
        }

        &-title {
          margin-left: 10px;
          font-size: 16px;
          &:hover {
            color: color.$base;
          }
        }
      }
    }
  }
}
</style>
    